<template>
    <div style="height: 100%">
        <div class="message-header">
            <span>分公司信息管理</span>
            <el-button type="success" @click="createBranchOffice" size="medium">新建公司信息</el-button>
        </div>
        <div v-loading="loading" class="message-content" >
            <el-table style="width: 100%;height: 100%"
                stripe 
                border 
                highlight-current-row 
                :data="dataList">
                <el-table-column 
                    v-for="(head,index) in listHead" :key="index"
                    show-overflow-tooltip 
                    class-name="table-head-name"
                    :prop="head.prop"
                    :label="head.label">   
                </el-table-column>
                <el-table-column 
                    show-overflow-tooltip 
                    class-name="table-head-name"
                    width="100"
                    label="操作">
                    <template slot-scope="scope">
                        <div class="operations">
                            <span @click="changeBranchOfficeItem(scope)">{{'修改'}}</span>
                            <span style="color: red" @click="deleteBranchOfficeItem(scope)">{{'删除'}}</span>
                        </div>
                    </template>                           
                </el-table-column>
            </el-table>
        </div>

        <!-- 新建和编辑 -->
        <el-dialog
            v-if="showBranchOfficeDialog"
            :visible.sync="showBranchOfficeDialog"
            :title="titleText + '分公司'"
            width="60%">
            <p class="new-dialog-title">基本信息</p>
            <el-form
                ref="dialogRef"
                :inline="true"
                class="new-dialog-form"
                :model="formInline"
                :rules="dialogRules"
                label-width="80px"
                label-position="top">
                <el-form-item
                    v-for="(item, index) in fieldList" 
                    :key="index"
                    :label="item.name"
                    :prop="item.fieldName">
                    <span slot="label">{{ item.name }}</span>
                    <template v-if="item.fieldType == 'input'">
                        <el-input v-model="formInline[item.fieldName]" />
                    </template>
                    <template v-if="item.fieldType == 'textarea'">
                        <el-input type="textarea" rows="3" maxlength="200" show-word-limit v-model="formInline[item.fieldName]" />
                    </template>
                    <template v-if="item.fieldType == 'image'">
                        <xh-files
                            :index="index"
                            :file-limit="1"
                            :value="formInline[item.fieldName]"
                            @value-change="fieldValueChange">
                        </xh-files>
                    </template>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer">
                <el-button type="primary" @click="saveData">保 存</el-button>
                <el-button @click="showBranchOfficeDialog = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
  saveBranchOfficeInfo,
  delBranchOfficeInfo,
  queryBranchOfficeList,
  queryBranchOfficeInfo
} from '@/api/systemManagement/SystemCustomer'
import { crmFileSave, crmFileDelete, crmFileSaveUrl } from '@/api/common'
import axios from 'axios'
import {
  guid
} from '@/utils'

import {
  XhFiles,
} from '@/components/CreateCom'
export default {
    data(){
        return {
            listHead: [
                {label: '分公司名称',prop: 'companyName'},
                {label: '分公司英文名称',prop: 'companyEnName'},
                {label: '位置区域',prop: 'companyArea'},
                {label: '开户银行',prop: 'companyBankName'},
                {label: '银行账号',prop: 'companyBankAccount'},
                {label: '传真号码',prop: 'fax'},
                {label: '通讯地址',prop: 'address'},
                {label: '创建人',prop: 'createUserName'},
                {label: '更新时间',prop: 'updateTime'},
            ],
            dataList:[],
            showBranchOfficeDialog: false,
            formInline: {},
            //校验规则
            dialogRules: {},
            loading: false,
            titleText: '新增',
            dataItem: {}
        }
    },
    components: {
        XhFiles
    },
    computed: {
        /** 字段列表 */
        fieldList: function() {
            return [
                { fieldName: 'companyName', name: '分公司名称',fieldType: 'input',value: null,defaultValue: '语祯物联科技（上海）有限公司',isNull: 1},
                { fieldName: 'companyEnName', name: '分公司英文名称',fieldType: 'input',value: null,defaultValue: 'YUZHEN-IOT Technology (Shanghai) Co.,Ltd.',isNull: 1},
                { fieldName: 'companyArea', name: '位置区域',fieldType: 'input',value: null,defaultValue: '上海',isNull: 1 },
                { fieldName: 'companyBankName', name: '开户银行',fieldType: 'input',value: null,defaultValue: '' ,isNull: 1},
                { fieldName: 'companyBankAccount', name: '银行账号',fieldType: 'input',value: null,defaultValue: '121923100610801' ,isNull: 1},
                { fieldName: 'fax', name: '传真号码',fieldType: 'input',value: null,defaultValue: null ,isNull: 0},
                { fieldName: 'address', name: '通讯地址',fieldType: 'textarea',value: null,defaultValue: '上海市闵行区吴宝路428号台尚创意园A6栋306室',isNull: 1 },
                { fieldName: 'officialSealId', name: '公章',fieldType: 'image',value: '',defaultValue: '' ,isNull: 1},
                { fieldName: 'contractSealId', name: '合同章',fieldType: 'image',value: '',defaultValue: '' ,isNull: 1}
            ]
        },
        httpHeader() {
            return {
                'Admin-Token': axios.defaults.headers['Admin-Token']
            }
        },
        crmFileSaveUrl(){
            return crmFileSaveUrl
        }
    },

    mounted() {
        this.init();
        this.handleFiledData();
    },

    methods: {
        init(data){
            this.getBranchOfficeItems();
        },

        //字段数据处理
        handleFiledData(){
            this.fieldList.forEach(element => {
                if(element.isNull == 1){
                    this.dialogRules[element.fieldName] = {
                        required: true,
                        message: element.name + '不能为空',
                        trigger: 'change'
                    }
                }
            });
        },

        fieldValueChange(data) {
            let index = data.index
            let fieldItem = this.fieldList[index];
            if(fieldItem.fieldName == 'officialSealId' || fieldItem.fieldName == 'contractSealId'){
                this.formInline[fieldItem.fieldName] = data.value.length ? data.batchId : '';
                this.$refs.dialogRef.validateField(fieldItem.fieldName)
                console.log(data)
            }
        },



        //获取分公司信息清单
        getBranchOfficeItems(){
            this.loading = true;
            queryBranchOfficeList().then(res => {
                this.loading = false;
                this.dataList = res.data;
            }).catch(res => {
                this.loading = false;
            })
        },

        //新增分公司信息
        createBranchOffice(){
            let item = {}
            this.fieldList.forEach(element => {
                item[element.fieldName] = element.value ? element.value : element.defaultValue;
            });
            this.formInline = item;
            this.titleText = '新增';
            this.showBranchOfficeDialog = true;
        },
        
        //修改分公司信息
        changeBranchOfficeItem(scope){
            
            // this.fieldList.forEach(element => {
            //     item[element.fieldName] = element.value ? element.value : element.defaultValue;
            // });
            let item = {};
            this.formInline = {};
            let self = this;
            let params = {
                companyId: scope.row.companyId
            };
            queryBranchOfficeInfo(params).then((res) => {
                this.fieldList.forEach(element => {
                    if(element.fieldName == 'officialSealId'){
                        item[element.fieldName] = [res.data.officialSeal];
                    } else if(element.fieldName == 'contractSealId'){
                        item[element.fieldName] = [res.data.contractSeal];
                    } else {
                        item[element.fieldName] = res.data[element.fieldName];
                    }
                });
                self.$nextTick(function(){
                    self.formInline = item;
                    self.formInline.companyId = scope.row.companyId;
                    self.titleText = '编辑';
                    self.showBranchOfficeDialog = true;
                })
                console.log(self.formInline)
            })
            // this.formInline = item;
            
        },

        //删除分公司信息
        deleteBranchOfficeItem(scope){
            let params = {
                companyIds : scope.row.companyId ? scope.row.companyId : 0
            }
            this.$confirm('确定删除该条分公司信息数据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delBranchOfficeInfo(params).then(res => {
                    this.getBranchOfficeItems()
                })
            }).catch(() => {
                   
            });
        },

        //保存数据
        saveData(){
            this.$refs.dialogRef.validate(valid => {
                if (valid) {
                    let formData = this.formInline;
                    let params = {
                        entity: formData
                    };
                    saveBranchOfficeInfo(params).then(res => {
                        this.showBranchOfficeDialog = false;
                        this.getBranchOfficeItems()
                    }).catch(res => {
                        this.showBranchOfficeDialog = false;
                    })
                }else{
                    this.$message.error("存在必填项未填写完成")
                }
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.message-header {
    height: 60px;
    font-size: 18px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.message-content {
    height: calc(100% - 70px);
    background-color: #ffffff;
    padding: 20px 20px 0 20px;
    box-sizing: border-box;

    /deep/ .table-head-name {
        color: #000;
        font-size: 13px;
        line-height: 23px;
        .operations {
            color: #5383ED;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            span:hover{
                cursor: pointer;
                border-bottom: 1px solid;
            }
        }
    }
}

.el-table /deep/ .el-table__row.current-row {
  td:first-child::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background-color: #5383ED;
  }
}
.el-dialog /deep/ .el-upload--picture-card{
    width: 100px !important;
    height: 100px !important;
}

.new-dialog-title {
  padding-left: 10px;
  margin-bottom: 3px;
  border-left: 2px solid #46cdcf;
}

.new-dialog-form {
  height: 50vh;
  overflow-y: auto;
  padding: 20px;
}
.new-dialog-form /deep/ .el-form-item {
  width: 50%;
  margin: 0;
  padding-bottom: 10px;
}
.new-dialog-form /deep/ .el-form-item .el-form-item__label {
  padding: 0;
}
.new-dialog-form /deep/ .el-form-item .el-form-item__content {
  width: 80%;
}

.new-dialog-form /deep/ .el-select {
  display: block;
}

</style>